<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-sessionStorage</title>
</head>
<body>
    <h1>sessionStorage</h1><br>
    <input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        /* 
        浏览器存储数据
        1. 数据存储在浏览器中
        2. 会话存储大约 5M,本地存储大约5M
        3. 只能存储jason 字符串  K——V
        4. 使用时需要转化

        sessionStorage:会话存储
        1. 数据只能在单页面中国使用
        2. 生命周期和页面同步
        */
       let input = document.querySelector("input");
       let set = document.querySelector(".set");
       let get = document.querySelector(".get");
       let remove = document.querySelector(".remove");
       let del = document.querySelector(".del");

       let hero = {
           name : "剑圣",
           sex : "男",
       }

       // 存储数据
       set.addEventListener('click',function(){
           // 可以理解成给 sessionStorag 这个 对象动态地添加属性
           sessionStorage.setItem('address','郑州');
           sessionStorage.setItem('value',input.value);
           sessionStorage.setItem('hero',JSON.stringify(hero));
       });

     // 获取数据
      get.addEventListener('click', function () {
      // 获取属性
      let address = sessionStorage.getItem("address");
      let value = sessionStorage.getItem("value");
      console.log(address);
      console.log(value);
    });

    // 删除指定数据
    remove.addEventListener('click', function () {
        // 删除属性
    sessionStorage.removeItem("value");
    });

      // 清空(全部)数据
      del.addEventListener('click', function () {
      // 删除指定的全部属性
      sessionStorage.clear()
    });
    </script>
</body>
</html>